<template>
  <box3 title="釜运行状态">
    <div class='fustatus'>
      <Run v-for="(item, index) in fuData" :key='index' :record="item" :num='index + 1' />
    </div>
  </box3>
</template>

<script setup lang="ts">
import {defineProps } from 'vue';
import useData from '../useData';
import Run from './run.vue';
import box3 from '../../compNew/box3.vue';

const props = defineProps<{
  isComp: boolean
}>()
const { fuData } = useData('fu', props.isComp);

</script>

<style lang="scss" scoped>

.fustatus {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
  padding: 15px;
}

.c2c-main {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fill, 120px);
  height: 100%;
}

.c2c-item {
  padding: 10px 20px 0;

  .item-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #03d9eb;
    color: #333;
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 3px 0 0 30px;
    border: 4px solid transparent;
    border-radius: 100%;

    &.is-blue {
      border-color: #03d9eb;
      color: #03d9eb;
    }

    &.is-green {
      border-color: #00c702;
      color: #00c702;
    }

    &.is-red {
      border-color: #dd3159;
      color: #dd3159;
    }

    &.is-gray {
      border-color: #dedede;
      color: #dedede;
    }

    .iconfont {
      animation: rotate 3s infinite linear;
      font-size: 30px;
    }
  }
}
</style>
